<template>
    <div>
      <div class="comment-medicine" v-for="item in list" :key="item.id">
        <div style="padding: 24px 0px 12px 90px; position: relative;">
          <el-skeleton style="width: 240px" :loading="isHovered" animated>
            <template slot="template">
              <el-skeleton-item
                variant="image"
                style="width: 600px; height: 240px;"
              />
            </template>
            <template>
              <div class="image-container">
                <img
                  :src="item.thumbnail"
                  class="image"
                />
              </div>
            </template>
            <div class="text">
              <p style="font-size: 24px">{{item.title}}</p>
              <p style="font-weight: bolder">{{item.introduction}}</p>
            </div>
            <!--          <el-link type="primary" @click="" class="detail-link"><span>详情信息</span><i class="el-icon-arrow-right"></i></el-link>-->
          </el-skeleton>
        </div>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleCurrentChange2"
          @current-change="handleSizeChange2"
          :current-page.sync="positionPage2.pageNo"
          :page-size="positionPage2.pageSize"
          layout="prev, pager, next"
          :total="positionPage2.totalCount">
        </el-pagination>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      showCard: false,
      isHovered: false,
      list: {},
      positionPage2: {
        totalCount: 7,
        pageNo: 1,
        pageSize: 12
      }
    }
  },
  created () {
    this.List()
  },
  mounted () {
  },
  methods: {
    async List () {
      try {
        const pageNo = this.positionPage2.pageNo
        const pageSize = this.positionPage2.pageSize
        // https://server.dayi.org.cn/api/cmedical/list2?pageNo=1&pageSize=10
        await this.$axiosApi.myAxios.get('/prescriptions/list2?' + 'pageNo=' + pageNo + '&' + 'pageSize=' + pageSize).then(resp => {
          const data = resp.data
          this.positionPage2.totalCount = data.totalCount
          this.list = data.list
        })
      } catch (error) {
        this.handleAxiosError(error)
      }
    },
    handleSizeChange2 (pageSize) {
      this.positionPage2.pageSizes = pageSize
      this.List()
    },
    handleCurrentChange2 (pageNo) {
      this.positionPage2.pageNo = pageNo
      this.List()
    },
    handleAxiosError (error) {
      // 检查是否是Axios的网络错误
      if (error.isAxiosError && error.response) {
        // 处理您的网络错误，例如显示用户友好的提示
        // this.$message.error('网络请求失败，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      } else {
        // 处理其他类型的错误
        // this.$message.error('网络请求失败，发生错误，请稍后重试')
        this.$notify({
          title: '网络请求失败',
          message: '网络请求失败，请稍后重试',
          type: 'error',
          offset: 100
        })
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.comment-medicine {
  margin: 0 auto;
}
.image-container {
  display: flex;
  align-items: center;
}
.image {
  width: 154px;
  height: 154px;
  display: block;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
}
.image:hover {
  transform: scale(1.1);
}
.text {
  position: absolute;
  left: 255px;
  top: 0;
  width: 700px;
  margin: 2px auto;
}
p {
  text-align: justify;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.detail-link {
  font-size: 16px;
  float left;
  position absolute;
  bottom 10px;
  span{
    color blue
  }
}

.block {
  margin: 12px auto;
  font-size 64px
}
</style>
